技術書典6 kyokucho1989
M5stack ことはじめ
1.はじめに
なるとはなにか。つくるとはなにか。自然に発生することと、意志をもった創造の境はどこにあるのだろう。たとえば駅の改札を抜ける時、おかしな音がリズミカルに聞こえてきたらそれは創造なのか。砂地においてある枝がなにかのスタートラインに見えたのは、発生なのか。そのようなことを考えながら日々を生きていた。もうすぐ30歳になる。
割と嘘だ。
呼吸をするようにくだらないものをつくりたい。そう意識すると、それらしい道具が必要になってくる。段ボールやセロハンテープでもそれはできるが、再現性を担保してみたい。くっそくだらないものを世界中にばらまき、世界を平和にしたい。
行き着いた答えがM5Stackだった。
2.M5stackとはなにか
M5Stackは手のひらサイズの魔法である。5cm四方高さ1cmの中にディスプレイと電源、ボタン、Wi-Fiやbluetoothが搭載された小型のマイコンモジュールである。周囲は樹脂でがっちりと覆われていて、ちょっと大きなたまごっちのようなかんじになっている。
こいつでなにができるのか。何でもできる。簡単なキッチンタイマーだってつくれるし、お絵かきソフトもつくれる。通信ができるので電報送信ソフトもできるはずだ。モーター類と接続させればロボットにもなる。「これを使えばくっそくだらないものを世界にばらまくことができるぞ!」
とてもうれしい気分になった。
そうはいっても、いきなりなんでも作れるわけではない。M5Stackを扱うにはそれ相応の知識が必要である。通信やIoT的なものはひとまず脇へ置き、とりあえずなにかつくれるようにはなりたい。というわけではじめてみよう。
3.やってみよう
3-1.必要なもの
必要なものは少ない。PCとM5Stackと時間と意欲だ。PCはmacでもwindowsでもいい。持ってるやつでだいたいなんとかなる。M5Stackはいろんな種類が売られている。私はジャイロセンサが搭載されているGLAYを使うことにした。amazonで5000円くらいだった。
M5Stackの写真。USBケーブルもついている。
3-2.環境構築(macの場合のみ)
Arduino IDEのインストール
M5Stackが届いたら環境を整えよう。まずはArduino IDEから。すでに持っている人も最新版にアップデートすることをおすすめする。そうしないとなんか不具合が起こる。
f:id:kyokucho1989:20190304221752p:plain
f:id:kyokucho1989:20190304221841p:plain
寄付を求めてくるが、別に寄付はしなくてもいい。無料でダウンロードできる。JUST DOWNLOAD!!
SiLabs CP2104 Driverのインストール
よくわかんないけどインストールしよう。
f:id:kyokucho1989:20190304222353p:plain
ESP32 Arduino Core のインストール
次にESP32 Arduino Coreをインストールしよう。ターミナルに以下のコードを打てばインストールは完了する。
mkdir -p ~/Documents/Arduino/hardware/espressif && \
cd ~/Documents/Arduino/hardware/espressif && \
cd esp32 && \
git submodule update --init --recursive && \
cd tools && \
python get.py
ライブラリのインストール
Arduino IDEを起動し、 >スケッチ>ライブラリをインクルード>ライブラリの管理 と選択しよう。
出てきた画面の検索バーに「m5stack」と打てばM5stackのそれが出てくる。インストールしよう。
f:id:kyokucho1989:20190306220126p:plain
M5stack とPCを接続
付属のUSBでM5stackとPCを繋げよう。そして、ボードとシリアルポートの設定を行う。メニューバーの「ツール」から選ぶ。 ボード は M5Stack-Core-ESP32 シリアルポートは/dev/cu.SLAB_USBtoUARTだ。
3-3.Hello World!!
環境が構築できたらサンプルコードを流し込もう。ファイル > スケッチ例 > M5stack > Basics > Hello World でOK。
こんなコードが出てくる。
// the setup routine runs once when M5Stack starts up
void setup(){
// Initialize the M5Stack object
M5.begin();
// LCD display
M5.Lcd.print("Hello World");
}
// the loop routine runs over and over again forever
void loop() {
}
あとはエディタの左上のボタンを選び、コンパイルしよう。M5stackはArduinoに比べてコンパイルの時間が長いきがする。気のせいだろうか……。
できたぞ!
文字ちっさ!!
3-4.注意すること
2点、注意することがある。まず、M5StackのUSBには裏表がある。正しい方向でつけないとUSBが認識されない。これはちょっとしたトラップだ。
あと、SiLabs CP2104 Driverを起動する際、macの場合はなんか許可を求めてくる。mac の左上のリンゴマークから「環境設定」を選び、「ダウンロードしたアプリケーションの実行許可」をオフにする必要がある。しかし、わたしはうまくいかなかった。オフにならないのだ。調べたら、セーフモードで起動するといいらしい。そうしたらできた。
セーフモードで起動するには、起動する際にずっとシフトキーを押しつづけるといい。Appleのロゴが出てきたら離してもOK。
4.いろいろやってみよう
4-1.文字をいろいろ変える
ハローワールドができたら、あとはいろいろやってみよう。とりあえず文字が小さすぎる。大きくしよう。大きくするのはこの命令をつかう。
M5.Lcd.setTextSize(2); //初期設定は1くらい。3にすると結構でかい。
文字の色を変えるにはこれを使う。
M5.Lcd.setTextColor(YELLOW); //ORANGEとかBLUEとかできる。
色の指定は0xとかの不思議な数字を使ってもできる。調整の仕方はよくわからない。そのうちできるようになる。
なんとRGB指定もできるらしい。
参考URL:
「M5StackのLCDディスプレイの色をRGBで指定する。」
uint16_t getColor(uint8_t red, uint8_t green, uint8_t blue){
return ((red>>3)<<11) | ((green>>2)<<5) | (blue>>3);
}
void setup() {
M5.begin();
M5.Lcd.fillScreen(getColor(255,0,0));
}
こんなふうにgetColor()というコマンドをつくればいいかんじに変換できるらしい。すごい!
画面を消すときはこれ。
M5.Lcd.clear(0x0000);
楽しいね。
4-2.図形を描く
そろそろ図形を描いてみよう。いくつかの命令を紹介する。
M5.Lcd.drawRect(X1, Y1, X2, Y2, COLOR); //四角形を描く (X1,Y1)から(X2,Y2)へ
M5.Lcd.drawTriangle(X1, Y1, X2, Y2, X3, Y3, COLOR); //三角形 (X1,Y1) (X2,Y2) (X3,Y3)の3点
M5.Lcd.drawCircle(X1, Y1, r, COLOR); //(X1,Y1)が中心 半径rの円を描く
4-3.ボタンを認識させる
M5Stackにはボタンが3つもついている。それぞれ左からABCと認識されているようだ。サンプルプログラムの「Button」をみてみよう。
/*
Name: button.ino
Created: 2018/9/21 14:06:15
Author: sakabin
*/
// The setup() function runs once each time the micro-controller starts
void setup() {
// init lcd, serial, not init sd card
M5.begin(true, false, true);
M5.Lcd.clear(BLACK);
M5.Lcd.setTextColor(YELLOW);
M5.Lcd.setTextSize(2);
M5.Lcd.setCursor(65, 10);
M5.Lcd.println("Button example");
M5.Lcd.setCursor(3, 35);
M5.Lcd.println("Press button B 700ms clear");
M5.Lcd.setTextColor(RED);
}
// Add the main program code into the continuous loop() function
void loop() {
M5.update();
// if want use Releasefor; suggest use Release in press event
if (M5.BtnA.wasReleased()) {
M5.Lcd.print('A');
} else if (M5.BtnB.wasReleased()) {
M5.Lcd.print('B');
} else if (M5.BtnC.wasReleased()) {
M5.Lcd.print('C');
} else if (M5.BtnB.wasReleasefor(700)) {
M5.Lcd.clear(BLACK);
M5.Lcd.setCursor(0, 0);
}
}
ABCをおすとABCとでてくる。
5.なにかつくろう
5-1.つくる=入力x出力!
ここまでできたらなにかつくってみよう。つくるのに難しい技術はいらない。つくるとはすなわち、入力と出力の組み合わせである。なにかをやったらなにかが起こればいいだけだ。M5stackにはすでにボタンがみっつもついている。これを使おう。ボタンを押したらなにか変わればいい。
5-2.顔文字でるでるマシンをつくる
さきほどのサンプルコードのABC部分を顔文字に変えてみよう。そうするとボタンを押したらどんどん顔文字がでてくるマシンができあがる。void loop()以下の部分をこんなふうに書き換えてよう。
void loop() {
M5.update();
// if want use Releasefor; suggest use Release in press event
if (M5.BtnA.wasReleased()) {
M5.Lcd.print(" (--)");
} else if (M5.BtnB.wasReleased()) {
M5.Lcd.print(" (^-^)");
} else if (M5.BtnC.wasReleased()) {
M5.Lcd.print(" (T^T)");
} else if (M5.BtnB.wasReleasefor(700)) {
M5.Lcd.clear(BLACK);
M5.Lcd.setCursor(0, 0);
}
}
これだけでも十分おもしろい。
5-3.お絵かきソフトをつくる
ボタンを押したら三角形や丸がかけるようにしてみよう。乱数という概念を使って、図形を描く位置をランダムに設定する。たのしいね。
ボタンを長押しすると消える。
void loop() {
M5.update();
// if want use Releasefor; suggest use Release in press event
if (M5.BtnA.wasReleased()) {
M5.Lcd.drawRect(random(M5.Lcd.width()-1), random(M5.Lcd.height()-1), random(M5.Lcd.width()-1), random(M5.Lcd.height()-1), BLUE);
} else if (M5.BtnB.wasReleased()) {
M5.Lcd.drawTriangle(random(M5.Lcd.width()-1), random(M5.Lcd.height()-1), random(M5.Lcd.width()-1), random(M5.Lcd.height()-1), random(M5.Lcd.width()-1), random(M5.Lcd.height()-1), YELLOW);
} else if (M5.BtnC.wasReleased()) {
M5.Lcd.drawCircle(random(M5.Lcd.width()-1), random(M5.Lcd.height()-1),random(3)*10, RED);
} else if (M5.BtnB.wasReleasefor(700)) {
M5.Lcd.clear(0x0000);
M5.Lcd.setCursor(0, 0);
}
f:id:kyokucho1989:20190308222817p:image:w400
6.つくったら公開しよう
6-1.アウトプットの楽しさ
つくったら世界中へどんどん公開しよう。アウトプットはたのしい。なぜならいろんな反応が返ってくるし、自分の理解力がぐぐっとあがるからだ。「もう少し完成度を高めてから・・・」とか「まだ人に見せられるレベルじゃない・・・」なんて躊躇していたらだめ!もったいない!
わたしはあなたの作品をみたい!
公開する手段はいろいろある。ブログで紹介してもいいし、Youtubeにのせてもいい。動画や写真付きでtwitterやinstagramに投稿するのもの楽しい。
6-2.「#M5stack」は世界を拓く魔法の言葉
twitterやinstagramに#M5stackというハッシュタグをつけると、M5マンたちがきてくれる。彼らはM5stackという単語でもって世界を眺めていて、誰かの投稿にすぐに反応してくれる。私はこの間、ロシアのM5stackさんにいいねされた。
Arduinoと違い、M5stackの知名度はまだ低い。ということは、なんだか知らないがチャンスなのだ。いま始めておけばいいかんじにあれになる!あれ!
6-3.ブログの投稿は自分のためにもなる
つくったものをブログに投稿すると、いろいろいいことがある。多くのひとにみてもらえるし、なにより自分のためになる。やったことを自分に最適化されたかたちで残してくれるからだ。
私は非常に忘れやすい生き物らしく、この間つくったプログラムも「あれどうやったっけなぁ」と思い出せないことがある。ネットで検索しても、すっごいマニアックな
情報の場合はでてこないことが多い。
しかし、ブログに残しておけばその心配はなくなる。
7.おわりに
M5stackの歴史はまだ始まったばかり。日々たくさんのものごとがアップデートされていて、いろんなことができるようになってる!私は非常にわくわくしている!この魔法の箱を自在に扱えるようになったら、あかるい未来がまっている気がするのだ!!!
というわけで、みなさんもぜひM5stackをはじめてみてね!!
著者
f:id:kyokucho1989:20190309221205j:plain
局長(id:kyokucho1989)
読書とコーヒーとものづくりが好き。さいきんM5stackをはじめた。広島に住んでる。
ブログ:「マトリョーシカ的日常」 matoyomi.hatenablog.com
twitter: @kyokucho_1989
------------------